<template>
    <div>
        <div class="container">
			<el-main>
                <el-form :label-width="formLabelWidth" :model="classifyForm" :rules="classifyFormRefRules" ref="classifyFormRef" >
                    <el-form-item label="ID" v-if="false">
                        <el-input v-model="classifyForm.id" class="handle-input mr10"></el-input>
                    </el-form-item>
                    <el-form-item label="商品类目类型" prop="classifyColumn" v-if="classifyColumnVisible">
                        <el-input v-model="classifyForm.strClassifyColumn" placeholder="商品类目类型" class="handle-input mr10" readonly clearable @click="dialogDictVisible=true"/>
                    </el-form-item>
                    <el-form-item label="类目名称" prop="classifyName">
                        <el-input v-model="classifyForm.classifyName" class="handle-input mr10"/>
                    </el-form-item>
                    <el-form-item label="分类等级" prop="classifyGrade">
                        <el-select v-model="classifyGradeVal" clearable placeholder="请选择" class="handle-select mr10" @change="func_showParentId">
                            <el-option v-for="(item, index) in classifyGradeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="父选项" prop="parentId" v-if="parentIdVisible">
                        <el-input v-model="classifyForm.parentId" class="handle-input mr10" v-if="false" ></el-input>
                        <el-cascader :options="parentIdClassifyOptions" :props="parentIdCascaderProps" clearable v-model="parentClassifyIdVal" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="classifyForm.remark" class="handle-input mr10" ></el-input>
                    </el-form-item>
                </el-form>
			</el-main>
			<el-footer>
                <el-button @click="func_closeDialog">取 消</el-button>
                <el-button type="primary" @click="func_saveDialogEdit">确 定</el-button>
			</el-footer>
        </div>
        <el-dialog title="商品类目类型（字典查询）" v-model="dialogDictVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VDict v-bind:selectValue="63" @dictData="func_loadvDictData" />
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findClassifyInfoById, saveClassify, findClassifyPullDownList } from "../../../../api/hairmanager/productClassify";
import VDict from "../../components/dict.vue";
export default {
    name: "classifyForm",
    components: {VDict},
  	props:{
        selectValue: Object,
	},
	emits: ["classifydata"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
		// 上级类目ID
        let classifyParentId = ref(0);
        const SUCCMESS_ADDDATA_DIALOG_MESSAGE = "添加数据成功";
        const formLabelWidth = ref("170px");
        /**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
                id: 0,
                classifyColumn: "",
                strClassifyColumn: "",
                classifyName: "",
                remark: "",
                classifyGrade: 0,
                parentId: 0
            }
        };
        /**
         * @name 表单初始化
         */
        const resetClassifyForm = () => {
            Object.assign(classifyForm, getInitFormData());
        };
        /**
         * @name 映射表单
         */
        const classifyForm = reactive(getInitFormData());
        // 业务表单映射
        const classifyFormRef = ref(null);
        const classifyGradeOptions = [
            { value: 0, label: "一类", },
            { value: 1, label: "二类", },
            { value: 2, label: "三类", },
        ];
        // 父分类三联动显示区分
        const parentIdVisible = ref(false);
        const classifyColumnVisible = ref(true);
        // 父分类三联动选项
        const parentIdClassifyOptions = ref([]);
        // 父分类三联动选项附加属性
        const parentIdCascaderProps = {
            checkStrictly: true,
        }
        const classifyGradeVal = ref(0);
        const parentClassifyIdVal = ref(0);
        const dialogDictVisible = ref(false);
        // 表单验证规则
        const classifyFormRefRules = {
            classifyColumn: [
                { required: true, message: "请选择类目类型", trigger: "blur" },
            ],
            classifyName: [
                { required: true, message: "请输入类目名称", trigger: "blur" },
            ],
        };
        // =========================================================================================
        // 主业务处理========================================================================================= START
        const func_onload = (pid) => {
            if(pid === 0){
                classifyGradeVal.value = 0;
                parentClassifyIdVal.value = 0;
            } else {
                findClassifyInfoById(pid).then((res) => {
                    let parentClassifyName = res.data.classifyName;
                    let checkVisible = res.data.classifyGrade + 1;
                    if(checkVisible >= 1) {
                        parentIdVisible.value = true;
                    }
                    classifyGradeVal.value = checkVisible;
                    parentClassifyIdVal.value = res.data.id;
                });
            }
        };
        /**
         * @name 表单内读取父选项下拉数据
         * @return 树状数据选择
         */
        const func_getClassifyOptions = () => {
            findClassifyPullDownList().then((res) => {
                parentIdClassifyOptions.value = res.data;
            });
        }
        /**
         * @name 保存服务项目配置
         */
        const func_saveDialogEdit = () => {
            classifyFormRef.value.validate((valid) => {
                if (valid) {
                    // 判定页面内表单处理区分，true初始化表单，否则读取ID对应的表单数据
                    if(props.selectValue['state']){
                        // 新建数据自页面选项
                        if(parentClassifyIdVal.value.length ===1){
                            classifyForm.parentId =parentClassifyIdVal.value[0];
                        } else if(parentClassifyIdVal.value.length ===2){
                            classifyForm.parentId =parentClassifyIdVal.value[1];
                        } else if(parentClassifyIdVal.value.length ===3){
                            classifyForm.parentId =parentClassifyIdVal.value[2];
                        }
                    } else {
                        // 前置页面参数传递的父选项
                        classifyForm.parentId = props.selectValue['id'];
                    }
                    classifyForm.classifyGrade = classifyGradeVal.value;
                    func_saveData();
                }
            });
        };
        /**
         * @name 回调父页面参数
         */
        const func_closeDialog = () => {
            cex.emit('classifydata', {state: 1, data: []});
        }
        /**
         * @name 父分类数据选项读取
         */
        const func_showParentId = () => {
            if(classifyGradeVal.value > 0){
                parentIdVisible.value = true;
                classifyColumnVisible.value = false;
            } else {
                parentIdVisible.value = false;
                classifyColumnVisible.value = true;
            }
        }
        const func_saveData = () => {
            saveClassify(classifyForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                    // cex.emit('classifydata', {state: 1, data: []});
                } else {
                    resetClassifyForm();
                    ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    cex.emit('classifydata', {state: 1, data: []});
                }
            });
        };
        const func_loadvDictData = (v) => {
            classifyForm.classifyColumn = v.dicCode;
            classifyForm.strClassifyColumn = v.dicName;
            dialogDictVisible.value = false;
        };
        // 业务数据监听
        watch(() => props.selectValue, (val) => {
            resetClassifyForm();
            // 判定页面内表单处理区分，true初始化表单，否则读取ID对应的表单数据
            if(!props.selectValue['state']){
                func_onload(props.selectValue['id']);
            } else {
                classifyColumnVisible.value = true;
                parentIdVisible.value = false;
                classifyGradeVal.value = 0;
                parentClassifyIdVal.value = 0;
            }
            func_getClassifyOptions();
        },{deep: true,immediate: true});
        return {
            // 系统变量 =========================================================================================
            formLabelWidth,  classifyForm, classifyFormRef, classifyFormRefRules, classifyGradeOptions, classifyParentId, classifyGradeVal, parentClassifyIdVal,
            // 父分类选项参数 =========================================================================================
            parentIdVisible, classifyColumnVisible, parentIdClassifyOptions, parentIdCascaderProps,
            // 主调用方法 =========================================================================================
            func_onload, getInitFormData, resetClassifyForm, func_saveDialogEdit, func_closeDialog, func_showParentId, func_getClassifyOptions,
            // 字典插件参数 =========================================================================================
            dialogDictVisible, func_loadvDictData,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 180px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>